import Vue from 'vue'
//引入VueRouter
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
// 使用插件
Vue.use(VueRouter)

const routes = [
//   路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
// 每个组件都有自己的$route属性，里面存储着自己的路由信息。
// 整个应用只有一个router，可以通过组件的$router属性获取到。
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/ref',
    name: 'Ref',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/ref.vue')
  },
  {
    path: '/Vuex',
    name: 'Vuex',
    component: () => import(/* webpackChunkName: "about" */ '../views/Vuex.vue')
  },
  {
    path: '/router',
    name: 'Router',
    component: () => import(/* webpackChunkName: "about" */ '../views/router.vue'),
    meta:{isAuth:true,title:'消息'},
    children: [
      {
        path: 'detail/:id/:title',
        name: 'Detail',
        component: () => import(/* webpackChunkName: "about" */ '../views/detail.vue'),
        meta:{isAuth:true,title:'详情'},
        // props($route) {
        //   return {
        //     id: $route.query.id,
        //     title:$route.query.title,
        //     a: 1,
        //     b: 'hello'
        //   }
        // },
        // 可以在路由配置上直接定义 beforeEnter 守卫,这些守卫与全局前置守卫的方法参数是一样的
        beforeEnter(to,from,next){
          console.log('beforeEnter',to,from)
          if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
            if(localStorage.getItem('username') === 'BaiYouXiu'){
              next()
            }else{
              alert('用户名不对，无权查看')
            }
          }else{
            next()
          }
        }
      }
    ]
  }
]

const router = new VueRouter({
  mode:"history",  // 不写mode，默认为hash
  routes
})
// 全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
  console.log('前置路由守卫', to, from);
  // to  要进入的目标，路由对象
  // from 当前导航正要离开的路由
  // next 涉及到next参数的钩子函数，必须调用next()方法来resolve这个钩子，否则路由会中断在这，不会继续往下执行
  // next()//直接进to 所指路由,如果全部钩子执行完了，则导航的状态就是confirmed(确认的)
  // next(false) //中断当前路由,如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到from路由对应的地址。
  // next('route') //跳转指定路由,当前的导航被中断，然后进行一个新的导航。可传递的参数可以是router-link标签中的to属性参数或router.push中的选项
  // next('error') //传入next的参数是一个Error实例，则导航会被终止且该错误会被传递给router.onError()注册过的回调
  if(to.meta.isAuth) {
    if(localStorage.getItem('username') === 'BaiYouXiu') {
      // 放行
      next()
    } else {
      alert('用户名不对，无权查看')
    }
  } else {
    next()
  }
})
//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
  console.log('后置路由守卫',to,from)
  if(to.meta.title){
    document.title = to.meta.title //修改网页的title
  }else{
    document.title = 'vue_study'
  }
})
export default router
